<template>
  <div class="h-screen bg-[#ffffff] flex flex-col md:flex-row">
    <Nav></Nav>
    <!-- 修改右侧内容区域，添加滚动支持 -->
    <div class="flex-1 p-4 md:p-8 overflow-y-auto">
      <!-- 欢迎区域 -->
      <div class="mb-6 md:mb-8">
        <h1 class="text-xl md:text-2xl font-semibold text-gray-800 mb-2">{{ greeting }}，{{ currentStudent.name }}!</h1>
        <p class="text-sm md:text-base text-gray-500">现在该打卡做什么呢？</p>
      </div>

      <!-- 功能卡片区域 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mb-6 md:mb-8">
        <div v-for="(card, index) in functionCards" 
          :key="index"
          class="bg-white rounded-xl p-4 md:p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer border border-gray-100"
          @click="handleCardClick(card.type)">
          <div class="flex items-center justify-between mb-3 md:mb-4">
            <h3 class="text-base md:text-lg font-medium text-gray-800">{{ card.title }}</h3>
            <el-icon class="text-xl md:text-2xl text-blue-500"><component :is="card.icon" /></el-icon>
          </div>
          <p class="text-xs md:text-sm text-gray-500">{{ card.description }}</p>
        </div>
      </div>

      <!-- 学习进度区域 -->
      <div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-4 md:mb-6">
          <h2 class="text-base md:text-lg font-medium text-gray-800">学习进度</h2>
        </div>
        
        <!-- 图表展示区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
          <div class="h-[200px] md:h-[250px] pt-4">
            <div class="text-sm md:text-base text-gray-600 font-medium mb-2">近7天学习时长</div>
            <v-chart class="w-full h-full" :option="getMobileLineOption" autoresize />
          </div>

          <div class="h-[200px] md:h-[250px] pt-4">
            <div class="text-sm md:text-base text-gray-600 font-medium mb-2">能力评估</div>
            <v-chart class="w-full h-full" :option="getMobileRadarOption" autoresize />
          </div>
          
          <div class="h-[200px] md:h-[250px] pt-4">
            <div class="text-sm md:text-base text-gray-600 font-medium mb-2">各科目得分</div>
            <v-chart class="w-full h-full" :option="getMobileBarOption" autoresize />
          </div>
          
          <div class="h-[200px] md:h-[250px] pt-4">
            <div class="text-sm md:text-base text-gray-600 font-medium mb-2">题目完成情况</div>
            <v-chart class="w-full h-full" :option="getMobilePieOption" autoresize />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Nav from "@/components/nav/index.vue";
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Monitor, Box, Reading } from '@element-plus/icons-vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, PieChart, BarChart, RadarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
// 添加 VChart 组件导入
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  RadarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
]);

const router = useRouter();

// 当前学生信息
const currentStudent = ref({
  name: '张栋梁',
  grade: '三年级'
});

// 根据时间生成问候语
const greeting = computed(() => {
  const hour = new Date().getHours();
  if (hour < 12) return '同学，早上好';
  if (hour < 18) return '同学，下午好';
  return '同学，晚上好';
});

// 功能卡片配置
const functionCards = [
  {
    title: '智能测试',
    description: '基于AI的个性化试题推荐',
    icon: Monitor,
    type: 'analysis'
  },
  {
    title: '试题宝库',
    description: '海量题库，按需练习',
    icon: Box,
    // type: 'question'
  },
  {
    title: '我要练习',
    description: '针对性练习，查漏补缺',
    icon: Reading,
    type: 'exercise'
  }
];

// 卡片点击处理
const handleCardClick = (type) => {
  switch (type) {
    case 'analysis':
      router.push('/analysis');
      break;
    case 'question':
      router.push('/question');
      break;
    case 'exercise':
      router.push('/exercise');
      break;
  }
};

// 折线图配置
const lineOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    name: '小时'
  },
  series: [{
    data: [2, 1.5, 3, 2.5, 3.5, 4, 3],
    type: 'line',
    smooth: true,
    areaStyle: {
      opacity: 0.3
    }
  }]
});

// 饼图配置
const pieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false
    },
    data: [
      { value: 500, name: '已完成' },
      { value: 300, name: '待复习' },
      { value: 200, name: '未完成' }
    ]
  }]
});

// 柱状图配置
const barOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['语文', '数学', '英语', '物理', '化学']
  },
  yAxis: {
    type: 'value',
    max: 100
  },
  series: [{
    data: [85, 92, 78, 88, 83],
    type: 'bar',
    barWidth: '30%',
    itemStyle: {
      borderRadius: [8, 8, 0, 0]
    }
  }]
});

// 雷达图配置
const radarOption = ref({
  radar: {
    indicator: [
      { name: '理解能力', max: 100 },
      { name: '记忆力', max: 100 },
      { name: '分析能力', max: 100 },
      { name: '应用能力', max: 100 },
      { name: '创新能力', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{
      value: [85, 90, 75, 80, 70],
      name: '能力评估',
      areaStyle: {
        opacity: 0.3
      }
    }]
  }]
});

// 添加移动端图表配置
const getMobileLineOption = computed(() => ({
  ...lineOption.value,
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    ...lineOption.value.xAxis,
    axisLabel: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  },
  yAxis: {
    ...lineOption.value.yAxis,
    axisLabel: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  }
}));

const getMobilePieOption = computed(() => ({
  ...pieOption.value,
  legend: {
    ...pieOption.value.legend,
    textStyle: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  },
  series: [{
    ...pieOption.value.series[0],
    radius: window.innerWidth < 768 ? ['35%', '65%'] : ['40%', '70%']
  }]
}));

const getMobileBarOption = computed(() => ({
  ...barOption.value,
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    ...barOption.value.xAxis,
    axisLabel: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  },
  yAxis: {
    ...barOption.value.yAxis,
    axisLabel: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  }
}));

const getMobileRadarOption = computed(() => ({
  ...radarOption.value,
  radar: {
    ...radarOption.value.radar,
    nameTextStyle: {
      fontSize: window.innerWidth < 768 ? 10 : 12
    }
  }
}));
</script>
<style scoped>
:deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}
</style>